<template>
  <div class="BusinessApplication">
    <!-- 地图选择 -->
    <div id="map" class="BusinessApplication_map">
      <img src="@/assets/address.png" alt="" srcset="" />
      <baidu-map
        class="map"
        ak="qDYUpMjrrcXBATEOsg8XpjEfCZ508kN8"
        mapType="BMAP_NORMAL_MAP"
        :auto-resize="true"
        :dragging="true"
        :center="center"
        :zoom="12"
        @moving="syncPolyline"
        :scroll-wheel-zoom="true"
      >
        <bm-geolocation
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          :showAddressBar="true"
          :autoLocation="true"
          @locationSuccess="locationSuccess"
        ></bm-geolocation>
      </baidu-map>
    </div>

    <div class="merchantType">
      <h3>商户类型</h3>
      <div>
        <van-tag
          v-for="(item, index) in merchantTypeList"
          :key="index"
          type="primary"
          :color="form.typeId == item.typeId ? '#D2A166' : '#fff'"
          :text-color="form.typeId == item.typeId ? '#fff' : '#D2A166'"
          :plain="form.typeId != item.typeId"
          size="large"
          @click="changeMerchantType(item.typeId)"
          >{{ item.typeName }}</van-tag
        >
      </div>
    </div>
    <!-- 填写内容 -->
    <van-cell-group class="BusinessApplication_input">
      <van-field
        v-model="form.mName"
        label="商户名称："
        placeholder="请输入商户名称"
      />
      <van-field
        v-model="form.name"
        label="联系人："
        placeholder="请输入联系人"
      />
      <van-field
        v-model="form.phone"
        type="tel"
        label="联系电话："
        placeholder="请输入联系电话"
      />
      <van-field
        v-model="form.address"
        label="联系地址："
        placeholder="请输入联系地址"
      />
      <van-field
        :value="form.lat + ',' + form.lon"
        label="定位坐标："
        readonly
        placeholder="请输入联系地址"
      />
      <van-field
        v-model="form.desc"
        rows="3"
        autosize
        label="商户简介："
        type="textarea"
        maxlength="30"
        placeholder="请输入商户简介"
        show-word-limit
      />
    </van-cell-group>
    <!-- 营业执照和logo -->
    <div class="logo">
      <h3>营业执照</h3>
      <van-uploader
        class="img"
        @oversize="onOversize"
        :max-size="2000 * 1024"
        :after-read="businessLicense"
      >
        <img
          style="width: 100%; height: 250px"
          :src="
            form.businessLicense == ''
              ? require('@/assets/moren.png')
              : $base.baseImg + form.businessLicense
          "
        />
      </van-uploader>
      <h3>门店照片</h3>
      <van-uploader
        class="img"
        @oversize="onOversize"
        :max-size="2000 * 1024"
        :after-read="updatalogo"
      >
        <img
          style="width: 100%; height: 250px"
          :src="
            form.logo == ''
              ? require('@/assets/moren.png')
              : $base.baseImg + form.logo
          "
        />
      </van-uploader>
    </div>
    <!-- 提交按钮 -->
    <div class="button">
      <van-button
        type="primary"
        color="#D2A166"
        @click="submitApplyMerchant"
        round
        block
        size="normal"
        >提交</van-button
      >
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Field, Button, CellGroup, Uploader, Tag, Toast } from "vant";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import { BmGeolocation } from "vue-baidu-map";
import { applyMerchant } from "@/types/types.ts";
var maps = require("qqmap");
Vue.use(Tag);
Vue.use(Uploader);
Vue.use(CellGroup);
Vue.use(Button);
Vue.use(Field);
@Component({
  components: {
    BaiduMap,
    BmGeolocation,
  },
})
export default class BusinessApplication extends Vue {
  private form: applyMerchant = {
    address: "",
    businessLicense: "",
    desc: "",
    lat: "",
    logo: "",
    lon: "",
    mName: "",
    name: "",
    phone: "",
    typeId: 0,
  };
  private center = { lng: 0, lat: 0 };

  private merchantTypeList = [];
  private created() {
    this.$common.setWxConfig(window.location.href);
    this.getLocation();
  }
  private mounted(): void {
    this.$common.getAuthToken(this.merchantType);
  }
  private locationSuccess(e: any) {
    this.form.lat = e.point.lat.toString();
    this.form.lon = e.point.lng.toString();
  }
  private getLocation() {
    let that = this;
    if (this.$common.getLocation("location") == null) {
      that.$wx.ready(function () {
        that.$wx.getLocation({
          type: "wgs84",
          success: function (res: any) {
            that.$common.setLocation(
              JSON.stringify({
                latitude: res.latitude,
                longitude: res.longitude,
              })
            );
            that.form.lat = res.latitude.toString();
            that.form.lon = res.longitude.toString();
            that.center.lat = res.latitude;
            that.center.lng = res.longitude;
          },
        });
      });
    } else {
      let location = JSON.parse(this.$common.getLocation());
      this.form.lat = location.latitude;
      this.form.lon = location.longitude;
      that.center.lat = location.latitude;
      that.center.lng = location.longitude;
    }
  }
  private getLoction(e: any): void {
    this.center = e;
  }
  // 移动地图
  private syncPolyline(e: any): void {
    this.form.lon = e.target.re.lng.toString();
    this.form.lat = e.target.re.lat.toString();
  }
  // 获取商户类型
  private merchantType(): void {
    this.$post(`merchantType`).then((res: any) => {
      if (res.code == 0) {
        this.merchantTypeList = res.data;
        this.form.typeId = res.data[0].typeId;
      }
    });
  }
  // 切换类型
  private changeMerchantType(e: number): void {
    this.form.typeId = e;
  }
  // 上传图片
  private businessLicense(file: any): void {
    let formData = new FormData();
    formData.append("img", file.file);
    this.$postFile(`upload`, formData).then((res: any) => {
      if (res.code == 0) {
        this.form.businessLicense = res.data.path;
      }
    });
  } // 上传图片
  private updatalogo(file: any): void {
    let formData = new FormData();
    formData.append("img", file.file);
    this.$postFile(`upload`, formData).then((res: any) => {
      if (res.code == 0) {
        this.form.logo = res.data.path;
      }
    });
  }
  // 限制图片
  private onOversize(file: any) {
    Toast.fail("文件大小不能超过 2M");
  }
  // 申请商户
  private submitApplyMerchant(): void {
    if (this.form.mName == "") {
      Toast.fail("商户名称是必填项");
      return;
    }
    if (this.form.name == "") {
      Toast.fail("联系人是必填项");
      return;
    }
    if (this.form.phone == "") {
      Toast.fail("电话是必填项");
      return;
    }
    if (this.form.address == "") {
      Toast.fail("地址是必填项");
      return;
    }
    if (this.form.desc == "") {
      Toast.fail("商户简介是必填项");
      return;
    }
    if (this.form.businessLicense == "") {
      Toast.fail("营业执照是必填项");
      return;
    }
    if (this.form.logo == "") {
      Toast.fail("门店照片是必填项");
      return;
    }
    this.$post(`applyMerchant`, this.form).then((res: any) => {
      if (res.code == 0) {
        Toast.success("提交成功请耐心等待审核");
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.BusinessApplication {
  width: 100%;
  box-sizing: border-box;
  .BusinessApplication_map {
    width: 100%;
    height: 600px;
    background-color: #f5f5f5;
    position: relative;
    .map {
      width: 100%;
      height: 100%;
    }
    img {
      width: 50px;
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -68px 0 0 -25px;
      z-index: 999999;
    }
  }
  .BusinessApplication_input {
    margin-top: 30px;
  }
  .merchantType {
    width: 100%;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    & > h3 {
      font-size: 30px;
      font-weight: 300;
      color: #000000;
      line-height: 2;
    }
    & > div {
      & > span {
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }
  .logo {
    width: 100%;
    margin: 30px 0 130px 0;
    padding: 30px;
    box-sizing: border-box;
    h3 {
      font-size: 30px;
      font-weight: 300;
      color: #000000;
      line-height: 2;
    }
    .img {
      width: 100%;
      .img1 {
        width: 100%;
      }
    }
  }
  .button {
    position: fixed;
    width: 100%;
    padding: 20px;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #fff;
  }
}
</style>
